<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>价格筛选</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            display: flex;
        }

        p {
            margin: 0;
        }

        img {
            width: 100px;
        }

        .products {
            width: 600px;
            height: 560px;
            margin: 0 auto;
        }

        ul li {
            width: 80px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            text-align: center;
            margin-left: 15px;
            background-color: whitesmoke;
        }

        ul li:first-child {
            margin-left: 0;
        }

        ul li:hover {
            cursor: pointer;
        }

        .products .list {
            display: flex;
            flex-wrap: wrap;
            width: 600px;
            height: 360px;
            margin: 0 auto;
            background-color: whitesmoke;
        }

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 180px;
            box-sizing: border-box;
            /* background-color: aqua; */
        }

        .item:hover {
            box-shadow: 0 0 7px 0px;
        }

        .item .price {
            font-size: 18px;
            color: red;
        }

        .active {
            background-color: green;
        }
    </style>
</head>

<body>

    <div class="products">
        <div class="header">
            <ul>
                <li data-id="0">0-100元</li>
                <li data-id="1">100-150元</li>
                <li data-id="2">150元以上</li>
                <li data-id="3" class="active">全部</li>
            </ul>
        </div>
        <div class="list">
            <div class="item">
                <img src="./images/1.jpg" alt="">
                <p class="name">aa</p>
                <p class="price">12</p>
            </div>
        </div>

    </div>
    <script>
        // 商品数据
        const dataList = [
            { picture: './images/1.jpg', name: '精品茶杯', price: 100 },
            { picture: './images/2.jpg', name: '茶杯礼盒套装', price: 89 },
            { picture: './images/3.jpg', name: '精致茶壶', price: 289 },
            { picture: './images/4.jpg', name: '碗壶套装', price: 124 },
            { picture: './images/5.jpg', name: '陶瓷茶碗', price: 122 },
            { picture: './images/4.jpg', name: '碗壶套装', price: 177 },
            { picture: './images/5.jpg', name: '陶瓷茶碗', price: 123 },
            { picture: './images/2.jpg', name: '茶杯礼盒套装', price: 209 },

        ]
        // 默认显示全部商品
        render(dataList)
        const ul = document.querySelector('ul')
        // 事件委托
        ul.addEventListener('click', e => {
            // 结构e.target
            const {tagName,dataset} =e.target
            if (tagName === 'LI') {
                // 清除active类
                document.querySelector('ul .active').classList.remove('active')
                e.target.classList.add('active')
                // 筛选数据
                if(dataset.id==='0')  render(dataList.filter(item=>item.price>0&&item.price<=100))
                if(dataset.id==='1')  render(dataList.filter(item=>item.price>100&&item.price<=150))
                if(dataset.id==='2')  render(dataList.filter(item=>item.price>150))
                if(dataset.id==='3')  render(dataList)
            }
        })
        // 渲染商品
        function render(data) {
            // 声明一个字符串变量
            let str = ''
            // 遍历数据
            data.forEach(item => {
                // 对象解构
                const { picture, name, price } = item
                str += `
            <div class="item">
                <img src="${picture}" alt="">
                <p class="name">${name}</p>
                <p class="price">￥${price}</p>
            </div>
            `
            })
            // 生成的字符串添加给list
            document.querySelector('.list').innerHTML = str
        }

    </script>
</body>

</html>